<template>
  <ContainerGroup>
    <Container>
      <!-- <FilterForm ref="searchForm" :elements="filterElements" :button-list="buttonList" /> -->
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="属性名称：" prop="name">
          <el-input v-model="name" placeholder="请输入名称" size="small" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="status" placeholder="请选择" size="small">
            <el-option value="0" label="启用" />
            <el-option value="1" label="禁用" />
          </el-select>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-button type="primary" size="mini" @click="searchHandle">查询</el-button>
          <el-button size="mini" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </Container>
    <Container scroll-y="true" height="fill">
      <div id="nevboxs">
        <el-button icon="el-icon-plus" type="primary" size="mini" @click="_addItemHandle">新增</el-button>
        <el-select v-model="statusBtns" size="small" style="width:110px;margin: 0 10px 0px 10px;" placeholder="停用/启用" @change="statusChange()">
          <el-option v-for="item in statusBtnList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="delloe" style="width:110px" size="small" placeholder="删除" @change="delList()">
          <el-option v-for="item in delloeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <el-table :data="tableData" border :header-cell-style="{ background: '#E8EAED', height: '42px' }" stripe size="mini" highlight-current-row @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="属性名称" prop="name" />
        <el-table-column label="禁用/启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" :active-value="'0'" :inactive-value="'1'" @click.stop.native @change="active_text(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="orderId" />
        <el-table-column label="创建时间" prop="createTime" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="text" @click="_editItemHandle(scope.row)">
                <i class="el-icon-edit-outline" />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="text" @click="_disableItemHandle(scope.row)">
                <i class="el-icon-delete" />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="数据项" placement="top">
              <el-button type="text" @click="_toDataHandle(scope.row)">
                <i class="el-icon-tickets" />
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <pagination :total="total" :page="currentPage" :page-size="pageSize" @pagation="pagationChange" />
      </div>
      <!-- 新增弹出框 -->
      <Dialog
        :title="titleText"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        :footer-btns="[
          {type:'info',text:'取消', trigger:'cancel'},
          {type:'primary',text:'确定', trigger: 'onOk'},
        ]"
        @cancel="closebtn"
        @onOk="() => {
          if (titleText === '新增属性') {
            submitForm('ruleForm', '0')
          }else{
            submitForm('ruleForm', '1')
          }
        }"
      >
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" style="min-width: 260px; padding: 20px 40px 0 0" class="demo-ruleForm">
          <el-form-item label="属性名称:" prop="name">
            <el-input v-model.trim="ruleForm.name" size="small" />
          </el-form-item>
          <el-form-item label="排序" prop="orderId">
            <el-input v-model.trim="ruleForm.orderId" oninput="value=value.replace(/[^\d]/g,'')" size="small" />
          </el-form-item>
          <el-form-item label="状态:">
            <el-switch v-model="rustatus" size="small" />
          </el-form-item>
        </el-form>
      </Dialog>
    </Container>
  </ContainerGroup>
</template>
<script>
import pagination from './../../../components/pagination/index'
import {
  getAllBaseDict,
  addBaseDictVo,
  updateBaseDictVo,
  updateBaseDictBatch,
  deleteBaseDictVoByIds
  // getBaseDictById
} from '../../../utils/apis/roleApi'
  // import {
  //   getAllBaseDict,
  //   addDictCategory,
  //   updateBaseDictVo,
  //   delDictCategory,
  //   updateBatch,
  // } from "./../../../apis/dictManagement/indexApi";
export default {
  name: 'DictManagement', // 字典管理
  components: {
    pagination
  },
  data() {
    return {
      // buttonList: [{
      //     label: '查询',
      //     type: 'primary',
      //     handlerClick: this.searchHandle
      //   },
      //   {
      //     label: '重置',
      //     type: 'info',
      //     handlerClick: this.reset
      //   }
      // ],
      // filterElements: [{
      //     key: 'name',
      //     type: 'Input',
      //     label: '属性名称'
      //   },
      //   {
      //     key: 'status',
      //     type: 'Select',
      //     label: '性别',
      //     value: this.status,
      //     options: [{
      //         value: '0',
      //         label: '禁用'
      //       },
      //       {
      //         value: '1',
      //         label: '启用'
      //       }
      //     ]
      //   }
      // ],
      name: '',
      status: '',
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      currentObj: null,
      storeList: [],
      nevbox: [],
      statusBtns: '',
      statusBtnList: [{
        label: '停用',
        value: '1'
      },
      {
        label: '启用',
        value: '2'
      }
      ],
      delloe: '',
      delloeList: [{
        label: '批量删除',
        value: '1'
      }],
      titleText: '',
      dialogVisible: false,
      categoryId: '',
      ruleForm: {
        name: '',
        orderId: ''
        // status: false,
      },
      rustatus: false,
      rules: {
        name: [{
          required: true,
          message: '请输入属性名称',
          trigger: 'blur'
        }],
        orderId: [{
          required: true,
          message: '请输入排序',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入编码',
          trigger: 'blur'
        }]
      }
    }
  },
  created() {
    this._getData()
  },
  methods: {
    _getData() {
      const parms = {
        // deleteFlag: 0,
        name: this.name,
        status: this.status,
        pageSize: this.pageSize,
        pageNum: this.currentPage
        // ascs: "orderId",
      }
      getAllBaseDict(parms).then((res) => {
        if (res.data.code === 200) {
          res.data.data.list.forEach((element) => {
            if (element.enable === '0') {
              element.statusVal = true
            } else {
              element.statusVal = false
            }
          })
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    searchHandle() {
      this.currentPage = 1
      this._getData()
    },
    reset() {
      this.name = ''
      this.status = ''
    },
    _addItemHandle() {
      this.titleText = '新增属性'
      this.dialogVisible = true
      this.ruleForm = {}
    },
    _editItemHandle(row) {
      this.titleText = '编辑属性'
      this.dialogVisible = true
      const obj = JSON.parse(JSON.stringify(row))
      this.$nextTick(() => {
        console.log(row.enable)
        this.ruleForm = obj
        this.rustatus = row.enable === '0'
      })
      console.log(this.rustatus)
    },
    handleSelectionChange(val) {
      this.nevbox = val
    },
    statusChange() {
      if (this.nevbox.length === 0) {
        this.$message.warning('请选择属性名称')
        this.statusBtns = ''
        return false
      }
      // if (this.statusBtns === "1") {
      //   this.nevbox.forEach((element) => {
      //     element.status = "0";
      //   });
      // } else {
      //   this.nevbox.forEach((element) => {
      //     element.status = "1";
      //   });
      // }
      const ids = this.nevbox.map(item => {
        return item.id
      })
      const parms = {
        list: ids,
        status: this.statusBtns === '1' ? '1' : '0'
      }
      updateBaseDictBatch(parms).then((res) => {
        if (res.data.code === 200) {
          this.statusBtns = ''
          this._getData()
        } else {
          this.$message.error(res.data.message)
        }
      })
      this.statusBtns = ''
    },
    delList() {
      const _this = this
      if (this.nevbox.length === 0) {
        this.$message.warning('请选择属性名称')
        this.delloe = ''
        return false
      }
      const ids = []
      this.nevbox.forEach((element) => {
        ids.push(element.id)
      })
      const parms = {
        ids: ids
      }
      deleteBaseDictVoByIds(parms).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          _this._getData()
        } else {
          this.$message.error(res.data.message)
        }
      })
      this.delloe = ''
    },
    handleClose() {
      this.dialogVisible = false
    },
    // 取消按钮
    closebtn() {
      this.dialogVisible = false
    },
    active_text(row) {
      let status = ''
      if (row.enable === '0') {
        status = '0'
      } else {
        status = '1'
      }
      const parms = {
        list: [row.id],
        status: status
      }
      updateBaseDictBatch(parms).then((res) => {
        if (res.data.code === 200) {
          this.$message.success('修改成功')
          this._getData()
        } else {
          this.$message.success('操作失败')
        }
      })
    },
    _disableItemHandle(row) {
      const _this = this
      this.$confirm({
        content: '是否确认删除该属性？',
        title: '温馨提示',
        okFn: (res) => {
          const parms = {
            ids: [row.id]
          }
          deleteBaseDictVoByIds(parms).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              _this._getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    },
    _toDataHandle(row) {
      this.$router
        .push({
          path: '/settings/data',
          query: {
            categoryId: row.id
          }
        })
        .catch((err) => {console.log(err)})
    },
    submitForm(formName, isEdit) {
      if (isEdit === '0') {
        this.addHandle(formName)
      } else {
        this.editHandle(formName)
      }
    },
    addHandle(formName) {
      const parms = {
        name: this.ruleForm.name,
        orderId: this.ruleForm.orderId,
        enable: this.rustatus ? '0' : '1'
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addBaseDictVo(parms).then((res) => {
            if (res.data.code === 200) {
              this.dialogVisible = false
              this._getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    editHandle(formName) {
      const parms = {
        name: this.ruleForm.name,
        orderId: this.ruleForm.orderId,
        enable: this.rustatus ? '0' : '1',
        id: this.ruleForm.id
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateBaseDictVo(parms).then((res) => {
            if (res.data.code === 200) {
              this.dialogVisible = false
              this._getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    pagationChange(payload) {
      this.currentPage = payload.page
      this.pageSize = payload.pageSize
      this._getData()
    }
  }
}
</script>
<style lang="less">
  #nevboxs .el-select {
    width: 109px;
    margin-bottom: 10px;
  }

  #nevboxs .el-input--suffix .el-input__inner {
    padding-right: 0px;
    padding-left: 12px;
    color: #333;
    border-color: #cdcbcb;
  }

  #nevboxs .el-select .el-input .el-select__caret {
    color: #333;
    line-height: 31px;
  }

  #nevboxs .el-input__inner::placeholder {
    color: #333;
  }

  // .el-dialog__header {
  //   background: #1d93a8;
  //   .el-dialog__title {
  //     color: #fff;
  //   }
  //   .el-dialog__close {
  //     color: #fff;
  //   }
  // }
  // .statusbox {
  //   display: inline-block;
  //   .el-select {
  //     width: 102px;
  //     margin-left: 20px;
  //   }
  //   .el-input--suffix .el-input__inner {
  //     padding-right: 0px;
  //     padding-left: 12px;
  //     height: 36px;
  //     color: #fff;
  //     border-color: #ff8901;
  //     background: #ff8901;
  //   }
  //   .el-select .el-input .el-select__caret {
  //     color: #fff;
  //     line-height: 36px;
  //   }
  //   .el-input__inner::placeholder {
  //     color: #fff;
  //   }
  //   /* 谷歌 */
  //   .el-input__inner::-webkit-input-placeholder {
  //     color: #fff;
  //   }
  //   /* 火狐 */
  //   .el-input__inner:-moz-placeholder {
  //     color: #fff;
  //   }
  //   /*ie*/
  //   .el-input__inner:-ms-input-placeholder {
  //     color: #fff;
  //   }
  // }
  // .delbox {
  //   .el-select {
  //     width: 80px;
  //   }
  //   .el-input--suffix .el-input__inner {
  //     color: #fc5454;
  //     border-color: #fc5454;
  //     background: #fff;
  //   }
  //   .el-select .el-input .el-select__caret {
  //     color: #999;
  //     line-height: 36px;
  //   }
  //   .el-input__inner::placeholder {
  //     color: #fc5454;
  //   }
  //   /* 谷歌 */
  //   .el-input__inner::-webkit-input-placeholder {
  //     color: #fc5454;
  //   }
  //   /* 火狐 */
  //   .el-input__inner:-moz-placeholder {
  //     color: #fc5454;
  //   }
  //   /*ie*/
  //   .el-input__inner:-ms-input-placeholder {
  //     color: #fc5454;
  //   }
  // }
</style>
<style lang="less" scoped>
  .wrapper {
    .wrapper-form {
      background: #fff;
      height: 45px;
      padding: 10px 15px;
      margin-bottom: 15px;
    }

    .warpper-table {
      background: #fff;
      box-sizing: border-box;
      padding: 15px;

      .table-btn {
        margin-bottom: 10px;
      }
    }
  }
</style>
